<template>
  <div
    id="login"
    style="height: 100%"
  >
    <!--<img-->
    <!--  style="position: fixed;top: 35px;left: 30px;"-->
    <!--  width="140px"-->
    <!--  src="@/assets/login/zhongwang-login-logo.png"-->
    <!--&gt;-->
    <div
      style="height: 100%;position: relative;"
    >
      <div style="width: 420px;position: absolute;top: 28%;left: 20%;">
        <div style="margin: 10px 0;color: #fff;text-align: center;font-size: 28px">
          {{ $t('message.login.header') }}
          <!--<div>综合网管系统</div>-->
        </div>
        <!--小标题-->
        <div style="margin: 10px 0;color: #fff;text-align: center;font-size: 28px">
          {{ $t('message.login.littleHeader') }}
          <!--<div>综合网管系统</div>-->
        </div>
        <el-form
          ref="loginform"
          :model="loginform"
          :rules="rules"
        >
          <el-form-item prop="username">
            <!--用户名-->
            <el-input
              autofocus
              class="login-input"
              ref="userInput"
              @keydown.native.enter="changeFocus"
              style="width: 100%"
              :placeholder="$t('message.login.form.placeholder1')"
              v-model="loginform.username"
            >
              <font-awesome-icon
                style="padding-left: 15px"
                slot="prefix"
                icon="user"
                size="lg"
              />
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <!--密码-->
            <el-input
              class="login-input"
              ref="passwordInput"
              @keydown.native.enter="doLogin"
              style="width: 100%"
              :placeholder="$t('message.login.form.placeholder2')"
              type="password"
              v-model="loginform.password"
            >
              <font-awesome-icon
                style="padding-left: 15px"
                slot="prefix"
                icon="lock"
                size="lg"
              />
            </el-input>
          </el-form-item>
        </el-form>
        <el-button
          :style="getStyleOfSubmitButton()"
          @click="doLogin"
        >
          <!--登录-->
          {{ $t('message.login.form.submitButtonText') }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      loginform: {
        username: null,
        password: null
      },
      rules: {
        username: [
          // 请输入用户名
          { required: true, message: this.$t('message.login.rules.username'), trigger: 'blur' }
        ],
        password: [
          // 请输入密码
          { required: true, message: this.$t('message.login.rules.password'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    changeFocus () {
      let self = this
      self.$refs.passwordInput.focus()
    },
    getStyleOfSubmitButton () {
      let self = this
      if (self.loginform.username && self.loginform.password) {
        return { width: '100%', color: '#fff', 'background-color': '#4e6d9d', border: 'none' }
      } else {
        return { width: '100%', color: '#fff', 'background-color': '#c0c4cc', border: 'none' }
      }
    },
    doLogin () {
      let self = this
      self.$refs['loginform'].validate(async (valid) => {
        if (valid) {
          let response = ''
          try {
            response = await self.$axios.post(`api/abs/auth/login/`, {
              username: self.loginform.username,
              password: self.loginform.password
            })
          } catch (e) {
            let message = ''
            switch (e.response.status) {
              case 500:
                message = '服务器错误'
                break
              case 400:
                for (let key in e.response.data) {
                  message += `<p>${e.response.data[key]}</p>`
                }
                message = `<div>${message}</div>`
                break
              default:
                message = e.response.data
            }
            self.$message.error({
              message: message,
              dangerouslyUseHTMLString: true
            })
            return
          }
          // 存放token在localStorage里面
          localStorage.setItem('token', response.data.token)
          self.$store.dispatch('getUserInfo')
          self.$router.push('/home')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
  #login{
    background: url("../assets/loginBackground.jpg") no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
  }
</style>
